<template>
	<div id="main">
		<div id="opendoor-logo" @click="guanmen">
			<el-icon :size="110" color="#409EFC"><Lock /></el-icon>
		</div>
		<div id="opendoor-bt">
			<button @click="guanmen">一键开门</button>
		</div>
	</div>
	
	
</template>

<script>
	import { Lock } from "@element-plus/icons";
	export default {
		name: "MainOpenDoor",
		components: {
			Lock
		},
		methods: {
			guanmen:function(){
			    this.$router.replace('/guanmen')
			}
		}
	}
</script>

<style lang="less" scoped>
	#main {
		width: 100%;
		height: 320px;
		clear: both;
		display: block;
		margin-top: 30px;
		float: left;
	}
	#opendoor-logo {
		width: 180px;
		height: 180px;
		border-radius: 100%;
		border: 2px dashed rgb(103,143,211);
		margin: 0 auto;
		background: linear-gradient(150deg, rgb(134,190,255), white, rgb(134,190,255));
	}
	#opendoor-logo .el-icon {
		margin-top: 30px;
		margin-left: 34px;
	}
	#opendoor-bt {
		margin-top: 63px;
	}
	#opendoor-bt button {
		width: 195px;
		height: 60px;
		color: white;
		font-size: 20px;
		margin-left: 92px;
		background: rgb(32,96,236);
		border-radius: 12px;
		border: none;
	}
</style>